import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { message } from 'antd';

interface AuthGuardProps {
    children: React.ReactNode;
}

const AuthGuard: React.FC<AuthGuardProps> = ({ children }) => {
    const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
    const navigate = useNavigate();

    console.log('AuthGuard rendering, isAuthenticated:', isAuthenticated);

    useEffect(() => {
        const checkAuth = () => {
            // 检查本地存储中的token
            const token = localStorage.getItem('authToken');

            if (!token) {
                // 没有token，显示提示并跳转到登录页
                console.log('未检测到登录token，需要先登录');

                // 显示Ant Design消息提示
                message.warning('请先登录后再访问管理后台');

                // 延迟跳转到登录页，让用户看到提示
                setTimeout(() => {
                    navigate('/login', { replace: true });
                }, 1500);

                setIsAuthenticated(false);
            } else {
                // 有token，验证token是否有效（这里可以添加更复杂的验证逻辑）
                try {
                    // 简单的token格式检查
                    if (token.length > 0) {
                        setIsAuthenticated(true);
                    } else {
                        throw new Error('Invalid token');
                    }
                } catch (error) {
                    console.log('Token无效，需要重新登录');
                    localStorage.removeItem('authToken');

                    // 显示Ant Design错误消息
                    message.error('登录已过期，请重新登录');

                    // 延迟跳转到登录页
                    setTimeout(() => {
                        navigate('/login', { replace: true });
                    }, 1500);

                    setIsAuthenticated(false);
                }
            }
        };

        checkAuth();
    }, [navigate]);

    // 如果还在检查认证状态，显示加载中
    if (isAuthenticated === null) {
        return (
            <div style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh',
                fontSize: '16px',
                color: '#666'
            }}>
                正在验证身份...
            </div>
        );
    }

    // 如果未认证，不渲染子组件
    if (!isAuthenticated) {
        return null;
    }

    // 如果已认证，渲染子组件
    return <>{children}</>;
};

export default AuthGuard;
